<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { payrollListApi } from '@/api/payroll'
import user from '@/composables/user'
import type { payrollListItemDto } from '@/api/payroll/type'

const payrollList = ref([] as payrollListItemDto[])
function onNextpPage() {
    console.log(1)
}
function toDetail(id: string | number) {
    console.log(id)
    uni.navigateTo({
        url: `/package-mine/pages/payroll-detail/payroll-detail?id=${id}`,
    })
}
onLoad(async () => {
    if (!user.userInfo.value.userId)
        return

    const result = await payrollListApi()
    payrollList.value = result.list
})
</script>

<template>
    <NavbarContainer nav-title="工资单">
        <scroll-view class="box-border min-h-100vh w-full px-32rpx pt-30rpx" @scrolltolower="onNextpPage">
            <view v-for="(item, i) in payrollList" :key="i" class="payroll" @click="toDetail(item.detailId)">
                <view>
                    <view>{{ item.name }}</view>
                    <view class="describe">{{ item.workYear }}年{{ item.workMonth }}月</view>
                </view>
                <view class="orange">￥{{ item.totalMoney }}</view>
            </view>
            <view v-if="!payrollList.length" class="box-border w-full pt-350rpx text-center">暂无数据</view>
        </scroll-view>
    </NavbarContainer>
</template>

<style scoped>
.container {
    padding-bottom: 200rpx;
    background-color: #fafafc;
}

.payroll-list {
    padding: 0 30rpx;
    box-sizing: border-box;
    width: 100%;
}

.orange {
    font-size: 32rpx;
    color: #ff7642;
}

.payroll {
    background-color: #ffffff;
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 112rpx;
    padding: 30rpx;
    font-size: 32rpx;
}

.describe {
    font-size: 28rpx;
    color: #9497b1;
    flex: none;
}
</style>

<route lang="json">
{
    "style": {
        "navigationBarTitleText": "我的工资单"
    }
}
</route>
